<template>
  <div>
    <div id="main1" style="width: 100%; height: 400px"></div>
    <div></div>

    <!-- <a-modal v-model="visible" style="top: 20px;" title="关键字详情列表" width="60%">
      <el-table :data="tableData" height="600" border style="width: 100%">
        <el-table-column prop="app_name" label="类别" width="120" align="center">
        </el-table-column>
		<el-table-column prop="" label="触发" width="200">
          <template slot-scope="scope">
            <div>关键词类别：{{ scope.row.trigger_class }}</div> 
            <div>关键词：{{ scope.row.trigger_value }}</div>
            <div>触发对象：{{ scope.row.nick }}</div>
            <div>是否群聊：{{ scope.row.isChatRoom==0?'否':'是' }}</div>
            <div>触发时间：{{scope.row.infoTime==0?formateDate(scope.row.infoTime):'暂无时间'}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="content" label="内容" >
        </el-table-column>
		<el-table-column
			fixed="right"
			label="操作"
			width="100">
			<template slot-scope="scope">
				<el-button @click="jumpContent(scope.row)" type="text" size="small">定位到模块</el-button>
			</template>
		</el-table-column>
      </el-table>

      <div class="block" style="margin-top: 10px;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="offset"
          :page-sizes="[20, 50, 100, 150]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </a-modal> -->
  </div>
</template>
  
<script>
import * as echarts from "echarts";
import { getKeyListInfo } from "@/api/proofOnly/index";
import { parseTime } from '@/utils/index'

export default {
  props: ["keyList", "value1", "value2", "selectedItems"],
  data() {
    return {
      offset: 1,
      limit: 20,
      search_trigger_value: "",
      tableData: [],
      visible: false,
	  total:0
    };
  },
  mounted() {
    this.initChart();
  },
  watch: {
    keyList: function (newVal, oldVal) {
      this.initChart();
    },
  },
  methods: {
  formateDate(date){
    return parseTime(date);
  },
  initOffsetLimit(offset,limit){
    this.offset = offset;
    this.limit = limit;
    this.handleChartClick1('');
  },
  initChart() {
    var myChart = echarts.init(document.getElementById("main1"), "macarons");
    let option = {
      title: {
        text: this.$t('analyze.mingzhongguanjianci'),
        subtext: "",
        left: "center",
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      xAxis: [
        {
          type: "category",
          axisTick: {
            alignWithLabel: true,
          },
          data: this.keyList.map((item) => item.trigger_value),
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
      series: [
        {
          name: this.$t('analyze.mingzhongNumber'),
          type: "bar",
          data: this.keyList.map((item) => item.cnt),
          itemStyle: {
            normal: {
              label: {
                contentType: false,
                show: true,
                position: "top",
                textStyle: {},
              },
              color: function (params) {
                var colorList = [
                  ["#1324b4", "#d6dafa", "#1324b4"],
                  ["#1324b4", "#d6dafa", "#1324b4"],
                  // ... 添加更多颜色
                ];
                var index = params.dataIndex;
                if (params.dataIndex >= colorList.length) {
                  index = params.dataIndex % colorList.length;
                }
                return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                  {
                    offset: 0,
                    color: colorList[index][0],
                  },
                  {
                    offset: 0.5,
                    color: colorList[index][1],
                  },
                  {
                    offset: 1,
                    color: colorList[index][2],
                  },
                ]);
              },
              barBorderRadius: 5,
            },
          },
        },
      ],
      axisLabel: {
        formatter: function (params) {
          var newParamsName = "";
          var paramsNameNumber = params.length;
          var provideNumber = 5;
          var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
          if (paramsNameNumber > provideNumber) {
            for (var p = 0; p < rowNumber; p++) {
              var tempStr = "";
              var start = p * provideNumber;
              var end = start + provideNumber;
              if (p == rowNumber - 1) {
                tempStr = params.substring(start, paramsNameNumber);
              } else {
                tempStr = params.substring(start, end) + "\n";
              }
              newParamsName += tempStr;
            }
          } else {
            newParamsName = params;
          }
          return newParamsName;
        },
      },
    };

    // 添加点击事件
    myChart.on("click", this.handleChartClick);

    option && myChart.setOption(option);
    window.addEventListener("resize", () => {
      myChart.resize();
    });
  },
  handleChartClick(params) {
    this.search_trigger_value = params.name
      ? params.name
      : this.search_trigger_value;
    let data = {
      proof_num: this.value1,
      starttime: this.value2[0] ? this.value2[0]/1000 : 0,
      endtime: this.value2[1] ? this.value2[1]/1000 : 2000000000,
      trigger_value: this.selectedItems.join(","),
      search_trigger_value: params.name
        ? params.name
        : this.search_trigger_value,
      offset: 1,
      limit: this.limit,
    };
    getKeyListInfo(data)
      .then((res) => {
        // this.visible = true;
        this.$parent.childrenFunction1(res.data,res.data[0].cnt)
        // this.$parent.$parent.scrollToBottom()
          // 触发自定义事件
        // this.$emit('scroll-to-bottom');
        this.tableData = res.data;
        this.total = res.data[0].cnt;
      })
      .catch((error) => {});
    // params 中包含了点击事件的信息
    // 你可以从 params 中获取相关的信息，例如：params.dataIndex、params.name 等
    // console.log("Click event:", params.name);
    // 在这里执行点击事件的处理逻辑
  },
  handleChartClick1(params) {
    this.search_trigger_value = params.name
      ? params.name
      : this.search_trigger_value;
    let data = {
      proof_num: this.value1,
      starttime: this.value2[0] ? this.value2[0]/1000 : 0,
      endtime: this.value2[1] ? this.value2[1]/1000 : 2000000000,
      trigger_value: this.selectedItems.join(","),
      search_trigger_value: params.name
        ? params.name
        : this.search_trigger_value,
      offset: this.offset,
      limit: this.limit,
    };
    getKeyListInfo(data)
      .then((res) => {
        // this.visible = true;
        this.$parent.childrenFunction(res.data,res.data[0].cnt)
        // this.$parent.$parent.scrollToBottom()
          // 触发自定义事件
        // this.$emit('scroll-to-bottom');
        this.tableData = res.data;
        this.total = res.data[0].cnt;
      })
      .catch((error) => {});
  },
  },
};
</script>
  
  <style>
</style>
  